<template>
    <div class="maindiv">
        <div class="divpad">
            <el-tag class="eltag">策略配置：</el-tag>
            <el-select v-model="Mode" placeholder="策略模式" style="width: 150px">
                <el-option v-for="item in optionsmode" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
            <el-tag class="eltag">充放电方向：</el-tag>
            <el-select v-model="CharDisCharDirect" placeholder="充放电模式" style="width: 150px">
                <el-option v-for="item in charDirectOpt" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
            <el-tag class="eltag">环境温度上限：</el-tag>
            <el-input v-model="envTemp" style="width: 100px" placeholder="Please input" clearable />
        </div>

        <div class="divpad">
            <el-tag class="eltag">逆流配置：</el-tag>
            <el-select v-model="refluxmode" placeholder="逆流模式" style="width: 150px">
                <el-option v-for="item in refluxoption" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
            <el-tag class="eltag">防逆流低值：</el-tag>
            <el-input v-model="refluxlow" style="width: 100px" placeholder="Please input" clearable />
            <el-tag class="eltag">防逆流触发值：</el-tag>
            <el-input v-model="refluxhight" style="width: 100px" placeholder="Please input" clearable />
        </div>

        <div class="divpad">
            <el-tag class="eltag">SOC配置:</el-tag>
            <el-tag class="eltag">最大SOC</el-tag>
            <el-input v-model="MaxSoc" style="width: 100px" placeholder="Please input" clearable />
            <el-tag class="eltag">最低SOC</el-tag>
            <el-input v-model="MinSoc" style="width: 100px" placeholder="Please input" clearable />
        </div>
        <div class="divpad">
            <el-tag class="eltag">日期优先级:</el-tag>
            <el-tag class="eltag">日期</el-tag>
            <el-date-picker v-model="dateval" value-format="YYYY-MM-DD" type="daterange" unlink-panels range-separator="To"
                start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts" :size="size" />
            <el-tag class="eltag">优先级</el-tag>
            <el-select v-model="policypri" placeholder="优先级选择" style="width: 150px">
                <el-option v-for="item in PriSel" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
            <el-tag class="eltag">星期设置</el-tag>
            <el-input v-model="weekDay" style="width: 100px" placeholder="Please input" clearable />
        </div>
        
        <div class="divpad" v-for ="(item,index) in time_line" :key="index">
            <el-tag class="eltag">开始时间</el-tag>
            <el-time-picker v-model="time_line[index].start_time" value-format="HH:mm:ss" :picker-options="{
                selectableRange: '18:30:00 - 20:30:00'
            }" placeholder="任意时间点">
            </el-time-picker>
            <span></span>
            <el-tag class="eltag">结束时间</el-tag>
            <el-time-picker v-model="time_line[index].stop_time" value-format="HH:mm:ss" :picker-options="{
                selectableRange: '18:30:00 - 20:30:00'
            }" placeholder="任意时间点">
            </el-time-picker>
            <el-tag class="eltag">功率值</el-tag>
            <el-input v-model="time_line[index].power" style="width: 80px" placeholder="Please input" clearable />
            <el-tag class="eltag">模式选择</el-tag>
            <el-select v-model="time_line[index].mode" placeholder="模式选择" style="width: 150px">
                <el-option v-for="item in timelineModeSel" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
            <el-tag class="eltag">功率百分比</el-tag>
            <el-input-number v-model="time_line[index].ratio" :min="1" :max="100" style="width: 120px" />

            <el-tag class="eltag">负荷功率偏移</el-tag>
            <el-input v-model="time_line[index].track_power" style="width: 80px  ;margin-right: 10px;" placeholder="Please input" clearable />
            <el-button type="danger" @click="DelTimeline(index)">删除</el-button>
        </div>
        <el-button type="primary" @click="Save">保存</el-button>
        <el-button type="primary" @click="AddTimeline">添加</el-button>

    </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
const Mode = ref()
const refluxmode = ref()
const refluxlow = ref()
const refluxhight = ref()
const MaxSoc = ref()
const MinSoc = ref()
const dateval = ref()
const CharDisCharDirect = ref()
const weekDay = ref()
const envTemp = ref()
const policypri = ref()

const Save=()=>{
    var obj = {}
    obj = {
        policy_mode: Mode.value,
        anti_reflux:{
                    mode: refluxmode.value,
                    start: refluxlow.value,
                    end: refluxhight.value,
                },
        soc_para:{
                    max_soc: MaxSoc.value,
                    min_soc: MinSoc.value,
                    dis_conn_grid_soc_min:0
                },
        data: {
            // start_date: dateval.value[0],
            // end_date: dateval.value[1],
            weekDay: weekDay.value,
            },
        power_para:{
            charge_discharge_mode: CharDisCharDirect.value,
        },
        envTemp: envTemp.value,
        policypri: policypri.value,
        time_line: time_line
    }
    if (dateval.value.length > 0 && dateval.value[0] != null && dateval.value[1] != null){
        obj.data.start_date = dateval.value[0]
        obj.data.end_date = dateval.value[1]
    }
    console.log('save:', obj)
  
}


const AddTimeline=()=>{
    var shortcuts ={
    start_time: 0, 
        stop_time: 0,
        power: 0,
        mode: 0,
        ratio: 0,
        track_power: 0,
    }
    time_line.push(shortcuts)
}

const DelTimeline=(index)=>{
     time_line.splice(index,1)
}

var  time_line=reactive([])

// const time_line = reactive([
//     {
//         start_time: 0, 
//         stop_time: 0,
//         power: 0,
//         mode: 0,
//         ratio: 0,
//         track_power: 0,
//     },
//     {
//         start_time: 0, 
//         stop_time: 0,
//         power: 0,
//         mode: 0,
//         ratio: 0,
//         track_power: 0,
//     },
//     {
//         start_time: 0, 
//         stop_time: 0,
//         power: 0,
//         mode: 0,
//         ratio: 0,
//         track_power: 0,
//     }, 
//     {
//         start_time: 0, 
//         stop_time: 0,
//         power: 0,
//         mode: 0,
//         ratio: 0,
//         track_power: 0,
//     },
//     {
//         start_time: 0, 
//         stop_time: 0,
//         power: 0,
//         mode: 0,
//         ratio: 0,
//         track_power: 0,
//     },
//     {
//         start_time: 0, 
//         stop_time: 0,
//         power: 0,
//         mode: 0,
//         ratio: 0,
//         track_power: 0,
//     },    {
//         start_time: 0, 
//         stop_time: 0,
//         power: 0,
//         mode: 0,
//         ratio: 0,
//         track_power: 0,
//     }
// ])


const PriSel = [
    {
        value: 1,
        label: '1'
    },
    {
        value: 2,
        label: '2'
    },
    {
        value: 3,
        label: '3'
    },
    {
        value: 4,
        label: '4'
    },
    {
        value: 5,
        label: '5'
    },
    {
        value: 6,
        label: '6'
    },
]
const timelineModeSel = [
    {
        value: 0,
        label: '停机'
    },
    {
        value: 1,
        label: '充电'
    },
    {
        value: 2,
        label: '放电'
    },
    {
        value: 3,
        label: '零功率'
    },
    {
        value: 4,
        label: '放电负荷跟踪'
    },
    {
        value: 5,
        label: '充电光伏跟踪'
    },
    {
        value: 5,
        label: '放电负荷跟踪差值'
    }
]
const charDirectOpt = [
    {
        value: '1',
        label: '正充负放',
    },
    {
        value: '-1',
        label: '负充正放',
    }
]
const refluxoption = [
    {
        value: '0',
        label: '实时调整',
    }, {
        value: '1',
        label: 'PID',
    }
]
const optionsmode = [
    {
        value: '0',
        label: '空策略',
    },
    {
        value: '1',
        label: '削峰填谷',
    },
    {
        value: '2',
        label: '变压器增容',
    },
    {
        value: '3',
        label: '光储光不可控',
    },
    {
        value: '4',
        label: '光储光可控',
    },
    {
        value: '5',
        label: '柴储',
    },
    {
        value: '6',
        label: '光储柴离网',
    },
    {
        value: '7',
        label: '光储充离网',
    },
    {
        value: '8',
        label: '储充离网',
    },
]
</script>
<style scoped>
.maindiv {
    margin: auto;
    width: 90%
}

.divpad {
    margin-bottom: 10px;
}

.eltag {
    margin-left: 10px;
    margin-right: 10px;
    height: 32px;
    font-size: 15px;
    width: 90;


}
</style>
